<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>堆垛机</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100vw;
        height: 100vh;
      }
      body {
        overflow: hidden;
      }
      .container {
        width: 100%;
        height: 100%;
        position: relative;
      }
      iframe {
        width: 100%;
        height: 100%;
      }
      .box {
        position: absolute;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/piler/bg.svg) no-repeat;
      }
      .box-0 {
        left: 178px;
        top: 140px;
        width: 229px;
        height: 507px;
      }
      .box-1 {
        left: 716px;
        top: 140px;
        width: 229px;
        height: 507px;
      }
      .box-2 {
        left: 1359px;
        top: 140px;
        width: 229px;
        height: 507px;
      }
      .box > .title {
        height: 30px;
        background: url(./images/piler/title.svg) no-repeat;
        padding: 0 30px 0 15px;
        position: relative;
        font-size: 16px;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .title::after {
        content: "";
        display: inline-block;
        width: 21px;
        height: 9px;
        position: absolute;
        top: 10px;
        right: 12px;
        background: url(./images/piler/u3.svg) no-repeat;
      }
      .list-col {
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 10px 15px;
      }
      .list-col > .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .list-item > .name {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
      .list-item > .value {
        font-size: 18px;
        color: rgba(102, 187, 249);
      }
      .list-col > .list-row {
        padding: 0;
      }
      .list-col > .list-row > .list-item {
        flex: 1;
      }
      video{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <video
        allowfullscreen="true"
        x5-video-player-fullscreen="true"
        id="video"
      ></video>
      <div class="box box-0">
        <div class="title"></div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">设备状态</div>
            <div class="value Condition">-</div>
          </div>
          <div class="list-item">
            <div class="name">运行次数</div>
            <div class="value Yield">-</div>
          </div>
          <div class="list-item">
            <div class="name">节拍</div>
            <div class="value K0">-</div>
          </div>
          <div class="list-item">
            <div class="name">运行时间</div>
            <div class="value K1">-</div>
          </div>
          <div class="list-item">
            <div class="name">电能</div>
            <div class="value K2">-</div>
          </div>
          <div class="list-item">
            <div class="name">提升电机电流</div>
            <div class="value K3">-</div>
          </div>
          <div class="list-item">
            <div class="name">行走电机电流</div>
            <div class="value K4">-</div>
          </div>
          <div class="list-item">
            <div class="name">货叉电机电流</div>
            <div class="value K5">-</div>
          </div>
          <div class="list-item">
            <div class="name">传感器头部异常</div>
            <div class="value K6">-</div>
          </div>
          <div class="list-item">
            <div class="name">传感器尾部异常</div>
            <div class="value K7">-</div>
          </div>
          <div class="list-item">
            <div class="name">硬件故障次数</div>
            <div class="value K8">-</div>
          </div>
        </div>
      </div>
      <div class="box box-1">
        <div class="title"></div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">设备状态</div>
            <div class="value Condition">-</div>
          </div>
          <div class="list-item">
            <div class="name">运行次数</div>
            <div class="value Yield">-</div>
          </div>
          <div class="list-item">
            <div class="name">节拍</div>
            <div class="value K0">-</div>
          </div>
          <div class="list-item">
            <div class="name">运行时间</div>
            <div class="value K1">-</div>
          </div>
          <div class="list-item">
            <div class="name">电能</div>
            <div class="value K2">-</div>
          </div>
          <div class="list-item">
            <div class="name">提升电机电流</div>
            <div class="value K3">-</div>
          </div>
          <div class="list-item">
            <div class="name">行走电机电流</div>
            <div class="value K4">-</div>
          </div>
          <div class="list-item">
            <div class="name">货叉电机电流</div>
            <div class="value K5">-</div>
          </div>
          <div class="list-item">
            <div class="name">传感器头部异常</div>
            <div class="value K6">-</div>
          </div>
          <div class="list-item">
            <div class="name">传感器尾部异常</div>
            <div class="value K7">-</div>
          </div>
          <div class="list-item">
            <div class="name">硬件故障次数</div>
            <div class="value K8">-</div>
          </div>
        </div>
      </div>
      <div class="box box-2">
        <div class="title"></div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">设备状态</div>
            <div class="value Condition">-</div>
          </div>
          <div class="list-item">
            <div class="name">运行次数</div>
            <div class="value Yield">-</div>
          </div>
          <div class="list-item">
            <div class="name">节拍</div>
            <div class="value K0">-</div>
          </div>
          <div class="list-item">
            <div class="name">运行时间</div>
            <div class="value K1">-</div>
          </div>
          <div class="list-item">
            <div class="name">电能</div>
            <div class="value K2">-</div>
          </div>
          <div class="list-item">
            <div class="name">提升电机电流</div>
            <div class="value K3">-</div>
          </div>
          <div class="list-item">
            <div class="name">行走电机电流</div>
            <div class="value K4">-</div>
          </div>
          <div class="list-item">
            <div class="name">货叉电机电流</div>
            <div class="value K5">-</div>
          </div>
          <div class="list-item">
            <div class="name">传感器头部异常</div>
            <div class="value K6">-</div>
          </div>
          <div class="list-item">
            <div class="name">传感器尾部异常</div>
            <div class="value K7">-</div>
          </div>
          <div class="list-item">
            <div class="name">硬件故障次数</div>
            <div class="value K8">-</div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/ezuikit.js"></script>
    <script>
      let did = getUrlParam("did"),
        vid = getUrlParam("vid"),
        token = localStorage.getItem("token");
      window.onload = function () {
        if (token) {
          if (vid) {
            getVideoDetail(vid);
          }
          if (did) {
            did = did.split(",");
            did.forEach((d, index) => {
              getDeviceDetail(d, index);
            });
          }
        }
      };

      function getDeviceDetail(id, i) {
        fetch(`/iot_device/device/getDeviceDetail?id=${id}`, {
          headers: {
            "Content-type": "application:/x-www-form-urlencoded:charset=UTF-8",
            token: token,
          },
        }).then(async (response) => {
          let res = await response.json();
          if (res.message == 200) {
            console.info(res.data);
            document.querySelector(".box-" + i + " .title").textContent =
              res.data.name;
            getHistoryData(+id, res.data.modelId, i);
            createWebsocket(id, res.data.modelId, i);
          }
        });
      }

      // 获取最近一条历史数据
      function getHistoryData(deviceId, modelId, index) {
        let params = [];
        for (let i = 0; i < 9; i++) {
          params.push({ deviceId, modelId, vk: `K${i}` });
        }
        params = JSON.stringify(params);
        fetch(encodeURI(`/iot_device/device/getScadaVariable?data=${params}`), {
          headers: {
            "Content-type": "application:/x-www-form-urlencoded:charset=UTF-8",
            token: token,
          },
        }).then(async (response) => {
          let res = await response.json();
          if (res.message == 200) {
            console.info(res.data);
            res.data.forEach((item) => {
              document.querySelector(`.box-${index} .${item.vk}`).textContent =
                item.value ?? "-";
            });
          }
        });
      }

      function getVideoDetail(id) {
        fetch(`/iot_device/device/getVideoSource?id=${id}`, {
          headers: {
            "Content-type": "application:/x-www-form-urlencoded:charset=UTF-8",
            token: token,
          },
        }).then(async (response) => {
          let res = await response.json();
          if (res.message == 200) {
            console.info(res.data);
            let accessToken = getUrlParam(
              "accessToken",
              res.data.Source.split("?")[1]
            );
            let url = getUrlParam("url", res.data.Source.split("?")[1]);
            let player = new EZUIKit.EZUIKitPlayer({
              id: "video", // 视频容器ID
              controls: false,
              accessToken,
              url,
            });
          }
        });
      }

      function createWebsocket(did, mid, i) {
        let host = location.host.includes("localhost")
          ? "s2.v3.hignton.com:9080"
          : location.host;
        let h = location.host.includes("devicecloud.chaint.net")
          ? "wss://"
          : "ws://";
        let url = `${h}${host}/base/iot_websocket/ws/`;
        let socket = new WebSocket(url, [token]);
        socket.onopen = (res) => {
          let param = {
            device_id: +did,
            product_id: +mid,
            type: 2,
            is_single: true, //是否单独监听此设备， 若为true 则客户端只会监听此设备
          };
          socket.send(JSON.stringify(param));
        };
        socket.onmessage = (res) => {
          let data;
          if (res.data) {
            localStorage.setItem(`${did}TimeData`, res.data);
            data = JSON.parse(res.data);
          } else {
            let resData = localStorage.getItem(`${did}TimeData`);
            if (resData) data = JSON.parse(resData);
            else data = {};
          }
          let points = data.Record ? data.Record.Points : [];
          let runStatus = ["通讯异常", "手动", "自动", "警告", "故障"];
          points.forEach((item) => {
            let el = document.querySelector(".box-" + i + " ." + item.K);
            if (el) {
              if (item.K === "Condition") {
                el.textContent = runStatus[item.V];
              } else {
                el.textContent = item.V;
              }
            }
          });
        };
        socket.addEventListener("error", (event) => {
          console.log("连接发生错误，尝试重新连接");
          setTimeout(() => {
            createWebsocket(did, mid);
          }, 3000);
        });
      }

      // 获取URL地址参数
      function getUrlParam(name, url = window.location.search.substr(1)) {
        let vars = url.split("&");
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split("=");
          if (pair[0] == name) {
            return pair[1];
          }
        }
        return false;
      }
    </script>
  </body>
</html>
